<#assign contextPath=springMacroRequestContext.getContextPath() />
<#import "/public/frame/main.html" as frame />
<@frame.head "南航明珠商城-<#if isedit>修改<#else>添加</#if>专题">
</@frame.head>
<style>
/*缩略图div*/
.div_show{float:left;background-color: #cccccc; width: 200px;height: 200px;display: inline-block; position: relative;}
.div_show img{ width: 200px;height: 200px;}
.div_show .delete{position: absolute;top: 10px; right: 0px;width: 40px; height: 40px;font-size: 36px;display:none;color:red;}
.edit_table td:nth-child(1){width:5%;}
.edit_table td{width:22%;}
</style>
<script type="text/javascript" src="${contextPath}/resources/js/jscolor.min.js"></script>
<nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 后台管理中心 <span class="c-gray en">&gt;</span> 商品管理 <span class="c-gray en">&gt;</span> <#if isedit>修改<#else>添加</#if>专题 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a></nav>
<div class="page-container">
<form method="post" name="save_form"  id="save_form"  action="${contextPath}/special_topic/<#if isedit>modify_template_special_topic<#else>create_template_special_topic</#if>"   enctype="multipart/form-data" target="hidden_frame" >    
    <#if isedit>
     <input type="hidden" name="specialTopicId" value="${templateSpecialTopic.id}"/>
    </#if>
    <div class="text-c">
    <table class="table edit_table">
      <tr>
        <td>专题名称：</td>
        <td><input type="text" class="input-text radius"  placeholder="请输入专题名称" value="${templateSpecialTopic.name}" id="name" name="name"/></td>
        <td><font color="red">*</font>  用于标识一个专题，系统内唯一</td>
      </tr>
      <tr>
        <td>专题简称：</td>
        <td><input type="text" class="input-text radius"  placeholder="请输入专题简称" value="${templateSpecialTopic.shortName}" id="shortName" name="shortName"/></td>
       <td><font color="red">*</font>  专题简称作为专题页菜单标题，最多不超过5个字</td>
      </tr>
      <tr>
        <td>开始时间：</td>
        <td>
        <input  type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',maxDate:'#F{$dp.$D(\'endDate\')}',readOnly: true })" id="startDate" 
               value='${(templateSpecialTopic.startDate?string("yyyy-MM-dd HH:mm:ss"))!}' name="startDate"  class="input-text Wdate">
         </td>
        <td><font color="red">*</font></td>
      </tr>
      <tr>
        <td>结束时间：</td>
        <td>
          <input  type="text" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss',readOnly: true })" id="endDate" 
               value='${(templateSpecialTopic.endDate?string("yyyy-MM-dd HH:mm:ss"))!}' name="endDate"    class="input-text Wdate">
        </td>
        <td><font color="red">*</font></td>
      </tr>
      <tr>
      <tr>
        <td>显示设备：</td>
        <td>
           	<input type="radio" name="displayType" value="1" <#if templateSpecialTopic.displayType!="2">checked="checked"</#if>/>PC端&nbsp;&nbsp;&nbsp;&nbsp;
			<input type="radio" name="displayType" value="2" <#if templateSpecialTopic.displayType=="2">checked="checked"</#if>/>移动端
        </td>
        <td></td>
      </tr>
      <tr>
        <td>专题大图：</td>
        <td>
        	   <div  id="showMainPicture" class="div_show">
	           <#if templateSpecialTopic??&&templateSpecialTopic.mainPicturePath??>
	           <img src="${imagePath}/specialTopic/${templateSpecialTopic.id}/${templateSpecialTopic.mainPicturePath}" data-type="1"/>
	           <#else>
	           <img/>
	           </#if>
	           <a href="javascript:;">
                 <div class="delete icon Hui-iconfont Hui-iconfont-del3"  data-id="addMainPicture" ></div>
               </a>
	           </div> 
        <input type="file" name="mainPicture" size="1" value="" id="addMainPicture" class="addImage" data-id="showMainPicture">
        </td>
        <td><font color="red">*</font>  建议上传1920*400尺寸，jpg、gif、png、或bmp格式，单张图片大小不超过2MB</td>
      </tr>
      <tr>
        <td>专题背景：</td>
        <td>
        <input type="radio" onchange="changeBackgroundType();" name="backgroundType" value="1" <#if templateSpecialTopic.backgroundType!="2">checked="checked"</#if>/>使用背景色&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="radio" onchange="changeBackgroundType();" name="backgroundType" value="2" <#if templateSpecialTopic.backgroundType=="2">checked="checked"</#if>/>使用背景图
        </td>
        <td></td>
      </tr>
      <tr>
      <td></td>
      <td>     
      <div id="backgroundColor_div">   
                   选色:&nbsp;&nbsp;<input class="jscolor input-text radius"  id="backgroundColor"   name="background"  value="FFFFFF" style="width:100px;">
      </div>
      <div id="backgroundPicture_div">   
               <div  id="showBackgroundPicture" class="div_show">
               <#if templateSpecialTopic??&&templateSpecialTopic.backgroundType=="2"&&templateSpecialTopic.background??>
	           <img src="${imagePath}/specialTopic/${templateSpecialTopic.id}/${templateSpecialTopic.background}" data-type="1"/>
	           <#else>
	           <img/>
	           </#if>
	           <a href="javascript:;">
                 <div class="delete icon Hui-iconfont Hui-iconfont-del3"  data-id="addBackgroundPicture" ></div>
               </a>
	           </div>
               <input type="file" name="backgroundPicture" size="1" value="" id="addBackgroundPicture" class="addImage" data-id="showBackgroundPicture">
      </div>
      </td>
      <td><font color="red">*</font>	建议上传宽度1920，高度不限图片，jpg、gif、png、或bmp格式，单张图片大小不超过2MB</td>
      </tr>
      <tr>
        <td colspan="2" style="text-align:center;">
        <button type="button" class="btn btn-success radius" onclick="sub_form();">下一步</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-secondary radius" onclick="cancle();">取消</button>
        </td>      
        <td></td>  
      </tr>
    </table>
    </div>
</form>
<iframe name="hidden_frame" style="display:none;"></iframe>		
</div>
<@frame.end "default">
</@frame.end>
</html>
<script type="text/javascript" src="${contextPath}/resources/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/laypage/laypage.js"></script>
<script type="text/javascript" src="${contextPath}/resources/js/special_topic/template_special_topic_add_or_update.js"></script>
<script type="text/javascript">
var path="${contextPath}";

</script>